<template>
  <view
    class="l-form-item"
    :class="{
      bb: border,
    }"
  >
    <view
      class="l-lbl"
      :class="{
        required: required,
      }"
      :style="{
        width: `${labelWidth}px`,
      }"
      v-if="label.trim().length > 0"
    >
      {{ label.trim() }}{{ colon ? ":" : "" }}
    </view>
    <view class="l-form-right">
      <slot></slot>
    </view>
  </view>
</template>
<script>
export default {
  name: "LiFormItem",
  props: {
    label: {
      type: String,
      default: "",
    },
    required: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: false,
    },
    colon: {
      type: Boolean,
      default: false,
    },
    labelWidth: {
      type: Number,
      default: 80,
    },
  },
};
</script>
<style lang="scss" scoped>
$l-form-border-color: #d6d7d9;
$white: #fff;
.l-form-item {
  display: flex;
  margin-bottom: 8px;
  align-items: center;
  padding: 3px 0;
  font-size: 14px;
  &.bb {
    border-bottom: 1px solid $l-form-border-color;
  }

  .l-lbl {
    padding-top: 3px;
    color: #989898;
    // font-weight: bold;
    &.required {
      position: relative;
      &::before {
        position: absolute;
        top: 5px;
        left: -7px;
        content: "*";
        color: red;
        display: inline-block;
      }
    }
  }

  .l-form-right {
    flex: 1;
  }

  // 文本框样式
  /*     .l-form-right.l-form-input {
      // height: 28px;
    } */

  .l-form-right.l-form-input,
  .l-form-right.l-form-textarea {
    flex: 1;
    border: 1px solid $l-form-border-color;
    border-radius: 5px;
    // padding: 3px 5px;
    background-color: $white;

    // input  样式
    .l-input {
      width: 100%;
    }

    //  textarea样式
    .l-textarea {
      width: 100%;
      height: 90px;
    }
  }

  // 树和picker样式
  .tree,
  .picker {
    flex: 1;
    border: 1px solid $l-form-border-color;
    background-color: $white;
    padding: 7rpx 10rpx;
    border-radius: 5px;
  }
}
</style>
